<script setup lang='ts'>
import { useView } from '@/pages/tender/use-view'
import { useGetHomeNotice } from '@fl/api/man-api'
import { ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'

import Card from './card.vue'
import { useTag } from './useTag'

defineOptions({
    name: 'Advantage',
})

const props = defineProps<{
    data: any
}>()

const { doLogin, userInfo, viewAuth } = useView()

const router = useRouter()

const { getClass, getLabel } = useTag()

const res: any = useGetHomeNotice({
    page: 1,
    size: 8,
})

const { data } = toRefs(props)

const activeName = ref(0)

const list = ref<any>([])

function getDate(val: any) {
    if (!val?.releaseTime)
        return { date: '', y: '' }
    const arr = val.releaseTime.split('-')
    return {
        date: `${arr[1]}/${arr[2]}`,
        y: arr[0],
    }
}

function goToTender() {
    router.push('/tender')
}

function clickHandle(params: any) {
    console.log(params)
    if (!userInfo) {
        doLogin('/')
    }
}

watchEffect(() => {
    list.value = res.data.value?.records ?? []
})
</script>

<template>
    <div class="home-advantage w-100%">
        <div class="advantage pb-40 pt-40 mx-auto mb-20 flex h-615 w-1300 justify-between items-center">
            <div class="h-536 w-610">
                <div class="jc-home-title mb-40">
                    <span>我们的优势</span>

                    <p>OUR ADVANTAGES</p>
                </div>

                <Card :data="data[1]?.items"
                      @click-handle="clickHandle"
                />
            </div>

            <div class="h-536 w-610">
                <div class="jc-home-title mb-40 relative">
                    <span>招标公告</span>

                    <p>LIST OF ANNOUNCEMENTS</p>

                    <div class="jc-home-title-icon"
                         @click="goToTender"
                    >
                        <i class="i-ep:arrow-right" />
                    </div>
                </div>

                <el-collapse v-model="activeName"
                             class="bids-collapse"
                             accordion
                >
                    <el-collapse-item v-for="(item, index) in list"
                                      :key="index"
                                      :name="index"
                                      @click="() => viewAuth(item)"
                    >
                        <template #title>
                            <div class="bids-row w-100%">
                                <template v-if="index === 0">
                                    <div class="bids-title text-ellipsis text-left cursor-pointer ws-nowrap of-hidden">
                                        {{ item?.noticeName }}
                                    </div>
                                </template>

                                <div v-else
                                     class="bids-title coll-row"
                                >
                                    <div class="mr-12 text-16 c-#4E5969 font-500 lh-20 text-left h-40 w-70">
                                        {{ getDate(item)?.date }}
                                        <span class="text-12 c-#767676 font-normal">
                                            {{ getDate(item)?.y }}
                                        </span>
                                    </div>

                                    <div class="col-title text-16 c-#1D2129 fw-600 text-left h-40 w-360">
                                        {{ item?.noticeName }}
                                    </div>
                                </div>

                                <span class="inline-block rounded-3 text-12 lh-21 text-center h21 w64"
                                      :class="getClass(item.category)"
                                >{{ getLabel(item.category)
                                }}</span>
                            </div>
                        </template>

                        <div class="text-14 c-#DA0004 max-h-85 cursor-pointer">
                            <div class="info-sty"
                                 v-html="item?.richText"
                            />
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.info-sty {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.home-advantage {
    background: url('https://public-obs-cdn.anjulian.com.cn/2024-05-28/d7be10a4-9b7c-4823-8a72-ed117bd5c1a9.png')
        0% 0% / 100% 100% no-repeat;
}

.advantage {
    .jc-home-title-icon {
        position: absolute;
        right: 0;
        top: 15px;
        height: 38px;
        width: 38px;
        line-height: 34px;
        text-align: center;
        font-size: 16px;
        border: 1px solid #aaa;
        border-radius: 38px;
        cursor: pointer;
    }

    .bids-collapse {
        :deep(.el-collapse-item__header),
        :deep(.el-collapse-item__wrap) {
            background: transparent;
        }
    }

    .bids-row {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bids-title {
            color: #da0004;
            font-size: 20px;
            font-weight: 600;
            width: 500px;
        }

        .coll-row {
            display: flex;

            .col-title {
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    }

    :deep(.el-collapse-item__header) {
        .el-collapse-item__arrow {
            display: none;
        }
    }
}
</style>
